<template>
    <div class="triangles" @click="onChoose">
        <div class="triangle" :class="{ color: num == 1 }"></div>
        <div class="triangle down" :class="{ color: num == -1 }"></div>
    </div>
    <svg :width="w" :height="h" :viewBox="`0 0 ${w} ${h}`">
        <polygon class="tsvg" stroke-linejoin="round" :points="`${w * 0.5}, 0 0, ${h} ${w}, ${h}`" />
    </svg>
</template>

<script lang="ts" setup>
import {ref} from "vue"
interface Prop {
    num: number;
}
const w = ref(20);
const h = ref(12);
const props = defineProps<Prop>();
const emit = defineEmits(["change"]);
const onChoose = () => {
    let t = props.num;
    if (++t > 1) {
        t = -1;
    }
    emit("change", t);
}
</script>

<style lang="less" scoped>
.triangle {
    width: 0;
    border-left: 6px solid transparent;
    /* 左边透明 */
    border-right: 6px solid transparent;
    /* 右边透明 */
    border-bottom: 6px solid rgb(180, 180, 180);
    /* 底边实色，86.6px ≈ sin(60°) * 100px */
    border-radius: 1px;
}

.color {
    border-bottom-color: #18a058;
}

.down {
    transform: rotate(180deg);
    margin-top: 2px;
}

.tsvg {
    fill: #0f6d0f;
    stroke: #0f6d0f;
    stroke-width: 6;
}
</style>